<style scoped lang="scss">
	.xy-modal {
        z-index: 999;
		background: #fff;
		border-radius: 4px;
		left: 0;
		right: 0;
		min-height: 20px;
		border: 0px solid rgba(0,0,0,0.05);
		position: fixed;
		height: fit-content;
		&.modal-top {
			top: 0;
		}
		&.modal-center {
			top: 0;
    		bottom: 0;
			margin: auto auto;
		}
		&.modal-bottom {
			bottom: 0;
		}
		.header {
			display: flex;
			justify-content: space-between;
			padding: 10px 10px;
			border-bottom: 1px solid rgba(0,0,0,0.05);
		}
		.body {
			padding: 0px;
		}
	}
</style>
<template>
    <view v-if="value">
		<uni-transition class="xy-mask" @click="close" :mode-class="['fade']" :show="showTrans" />
		<uni-transition
			class="xy-modal"
			:class="'modal-' + position"
			:style="{margin: modalMargin}"
			:mode-class="ani"
			:show="showTrans">
			<view class="header" v-if="header.show">
				<view class="title">
					{{header.title}}
				</view>
				<view class="close" @click="close">
					<text class="xyicon xyicon-close text-gray font-sm"></text>
				</view>
			</view>
			<view class="body">
				<slot />
			</view>
			<view class="footer">
			</view>
		</uni-transition>
    </view>
</template>
<script>
import uniTransition from "../uni-transition/uni-transition.vue";
export default {
    name: 'XyModal',
	components: {
		uniTransition
	},
    props: {
		showTrans: {
			type: Boolean,
			default: true
		},
		value: {
			type: Boolean,
			default: false
		},
		header: {
			type: Object,
			default: () => ({
				show: false,
				title: '弹窗'
			})
		},
		position: {
			type: String,
			default: 'bottom' // top,bottom,center
		},
		maskClick: {
			type: Boolean,
			default: true // 点击蒙版是否关闭弹窗
		},
		modalMargin: {
			type: String,
			default: 'auto auto'
		}
    },
    data() {
        return {
			ani: []
        }
    },
    created: function () {
		this.showModal = this.show;
    },
	watch: {
		value(val) {
			switch (this.position) {
				case 'top':
					this.ani = ['slide-top'];
					break;
				case 'bottom':
					this.ani = ['slide-bottom'];
					break;
				case 'center':
					this.ani = ['zoom-out', 'fade'];
					break;
			}
		}
	},
    methods: {
		close() {
			this.value = false;
			this.$emit('input', false);
		}
    }
}
</script>
